---
import { Image } from 'astro:assets'
import 'swiper/css'
import 'swiper/css/effect-coverflow'

type Feature = {
    icon: string,
    description: string
}

const features = [
    {
        description: 'Shared core with C++ and JSI bindings',
        icon: 'cpp'
    },
    {
        description: 'Crazy performance, adds under 0.1 ms to your StyleSheet',
        icon: 'performance'
    },
    {
        description: 'Cross platform support: iOS, Android, Expo, React Native Web, macOS and SSR',
        icon: 'cross-platform'
    },
    {
        description: 'Supports both old and new (Fabric) architecture',
        icon: 'fabric'
    },
    {
        description: 'Use breakpoints and media queries for all screen sizes',
        icon: 'breakpoints'
    },
    {
        description: 'Register multiple themes and change them with single function call',
        icon: 'themes'
    },
    {
        description: 'Keeps your components simple. Everything is packed in one hook',
        icon: 'hook'
    },
    {
        description: 'Battle tested with ~99% test coverage',
        icon: 'bugs'
    },
    {
        description: 'Extend stylesheets with your own plugins',
        icon: 'plugins'
    },
    {
        description: 'Supports user-defined variants',
        icon: 'variants'
    },
    {
        description: 'TypeScript first support, always get perfect Intellisense',
        icon: 'ts'
    },
    {
        description: 'Easy to set up, no need for React Context',
        icon: 'react'
    }
] satisfies Array<Feature>
---

<section id="features">
    <h2>Features</h2>
    <section class="swiper features-container">
        <div class="swiper-wrapper features">
            {features.map((feature) => (
                <div class="feature swiper-slide">
                    <img class="feature__icon" src={`/features/${feature.icon}.svg`} alt="" />
                    <p class="feature__description">
                        {feature.description}
                    </p>
                </div>
            ))}
        </div>
    </section>
</section>

<style>
    section {
        position: relative;
        z-index: 20;
    }

    h2 {
        font-weight: 700;
        font-size: 40px;
        margin: 37vw 0 100px 0;
        text-align: center;
    }

    .features-container {
        width: 100%;
    }

    .features {
        display: flex;

        @media (min-width: 1025px) {
            visibility: visible!important;
            margin: 0 auto!important;
            flex-wrap: wrap;
            justify-content: center;
            margin: 0 auto;
            max-width: 1600px;
            gap: 48px;
        }
    }

    .feature {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: rgba(255, 255, 255, 0.2);
        border-radius: 24px;
        gap: 32px;
        text-align: center;
        padding: 40px 26px;
        height: auto!important;

        @media (min-width: 1025px) {
            width: 30%;
            min-width: 460px;
            padding: 32px;
        }

        &__icon {
            height: 75px;
            width: auto;
        }

        &__description {
            font-size: 24px;
            line-height: 32px;
            font-weight: 500;

            @media (max-width: 1024px) {
                font-size: 16px;
                line-height: 18px;
            }
        }
    }
</style>

<script>
    const matchTablet = window.matchMedia('(min-width: 700px) and (max-width: 1024px)')
    const matchMobile = window.matchMedia('(max-width: 700px)')
    let disposeCarousel = () => {}

    const handleMedia = async () => {
        disposeCarousel()

        if (!matchTablet.matches && !matchMobile.matches) {
            return
        }

        const { init } = await import('../carousel')

        disposeCarousel = init(matchTablet.matches)
    }

    matchTablet.addEventListener('change', handleMedia)
    handleMedia()
</script>
